<template>
  <div class="xjdwkgxPopUp">
        <el-form
        ref="elForm"
        :model="formData"
        size="medium"
        label-width="1.2rem"
      >
        <el-row :gutter="15">
          <el-col :offset="1" :span="5">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="设备名称:" prop="time">
                    <el-input v-model="formData.cities"
                    placeholder="请选择所属地市"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="2" :span="5">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="点位名称:" prop="">
                    <el-input v-model="formData.substation"
                    placeholder="请选择所属地市"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="2" :span="5">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="巡检类型:" prop="source">
                  <el-select
                    v-model="formData.sideShot"
                    placeholder="全部"
                    clearable
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item) in sideShotOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
           <el-col :offset="1" :span="3">
            <el-row :gutter="15">
              <el-col :span="24">
                  <el-button @click="query" type="primary">查询</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    <div class="tableed bigTableStyle">
      <el-table
      border
        :data="tableData"
        height="100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%;"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="myIndex" label="序号" width="60"></el-table-column>
        <el-table-column
          prop="SSDSMC"
          label="所属地市"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="WHBZMC"
          label="维护班组名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="BDZMC"
          label="变电站名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="JGMC"
          label="间隔名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="SBMC"
          label="设备名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="SBLX"
          label="设备类型"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="DWMC"
          label="点位名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="XJLX"
          label="巡检类型"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="JXKSSJ"
          label="检修开始时间"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="JXJSSJ"
          label="检修结束时间"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      
        <el-table-column
          prop="CJSJ"
          label="创建时间"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      >
      </el-pagination>
    </div>
    <div class="btn">
        <el-button type="primary" @click="deter">确定</el-button>
          <el-button type="primary" @click="cancel"
            >取消</el-button
          >
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue ,Prop} from 'vue-property-decorator';
import { JointInspectionModule } from "@/store/modules/JointInspection";
  @Component({

  })
  export default class xjdwkgxPopUp extends Vue {
    @Prop({default:{}})
    xjdwkForm:any
    formData={
      cities:'',
      substation:'',
      sideShot:''
    }
    tableData=[]
  //分页数据事件相关
  pages = {
    pageSize: 10,
    page: 1,
    totalSize: 120,
  };
  //勾选的数据ID
  ids=''
  get sideShotOptions (){
    return JointInspectionModule.getXslxList
  }
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize=val
    // console.log(`每页 ${val} 条`);
 this.xjdwkList()
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page=val
    this.xjdwkList()
    
  }
      tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
    deter(){
      var from={};
        (from as any).ids=this.ids;
        (from as any).bdzid=this.xjdwkForm.bdzid;
        (from as any).jqrid=this.xjdwkForm.jqrid;
        (from as any).rwid=this.xjdwkForm.rwid;
        (from as any).xsfs=this.xjdwkForm.xsfs;
        // console.log(this.ids.length);
        
        
        if (this.ids.length>0) {
          (this as any).$services
              .taskPointSave({ data:from, method: "post", postparams:true })
              .then((result: any) => {
                // console.log(result);
                 if (result.code==200) {
                    this.$message({
                      showClose: true,
                      message: result.message,
                      type: 'success'
                    });
                  }else{
                     this.$message({
                      showClose: true,
                      message: result.message,
                      type: 'warning'
                    });
                  }
              })
              .catch((err: object) => {
                console.log(err);
                this.$message({
                      showClose: true,
                      message: (err as any).msg,
                      type: 'warning'
                    });
              });
        }
        
        this.$emit('deter',false,this.ids)
    }
    cancel(){
        this.$emit('deter',false,this.ids)
    }
  handleSelectionChange(val){
     
         this.ids=''
      val.map((item:any)=>{
         this.ids=this.ids+','+item.ID
       })
       this.ids=this.ids.substr(1)
        // console.log(this.ids);
  }
  xjdwkList(){
    var from={
    };
    (from as any).page=this.pages.page;
    (from as any).rows=this.pages.pageSize;
    (from as any).bdzid=this.xjdwkForm.bdzid;
    (from as any).xsfs=this.xjdwkForm.xsfs;
    (from as any).dwmc=this.formData.cities;
    (from as any).sbmc=this.formData.substation;
    (from as any).xjlx=this.formData.sideShot;
    (this as any).$services
          .taskPointQuery({ data:from})
          .then((result: any) => {
            // console.log(result);
            let page = this.pages.page;
            let size = this.pages.pageSize;
            this.tableData=result.data.rows.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
            this.pages.totalSize=result.data.total
          })
          .catch((err: object) => {
            console.log(err);
          });
    
  }
  query(){
    this.xjdwkList()
  }
  mounted(){
    // console.log(this.xjdwkForm);
    this.xjdwkList()
  }
  }
</script>

<style lang="scss" scoped>
.xjdwkgxPopUp{
    height: 6.5rem;
    .tableed {
    width: 100%;
    height: calc(100% - 1.4rem);
  }
   .paged {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn{
      height: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
}
</style>

